<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语音合成工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .container {
            max-width: 600px;
            margin: auto;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-top: 10px;
        }

        textarea, select, input[type="text"], input[type="file"] {
            margin-top: 5px;
            padding: 5px;
        }

        .button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

        .button:hover {
            background-color: #45a049;
        }

        #upload-audio-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>语音合成工具</h1>
    <form id="synthesis-form">
        <label for="synthesis-text">输入合成文本</label>
        <textarea id="synthesis-text" rows="4" cols="50"></textarea>

        <label for="summary-mode">选择摘要模式</label>
        <select id="summary-mode">
            <option value="mode1">模式一</option>
            <option value="mode2">模式二</option>
        </select>

        <label for="pre-trained-voice">选择预训练音色</label>
        <select id="pre-trained-voice">
            <option value="voice1">音色一</option>
            <option value="voice2">音色二</option>
        </select>

        <label for="power-file">选择power设置文件</label>
        <input type="file" id="power-file" multiple>

        <button id="add-power-file">添加power设置文件</button>

        <div id="upload-audio-area">
            <p>将音频拖放到此处 或 点击上传</p>
            <input type="file" id="audio-upload" style="display:none;">
            <label for="audio-upload" class="button">上传音频</label>
        </div>

        <label for="power-text">输入power文本</label>
        <input type="text" id="power-text">

        <label for="instruct-text">输入instruct文本</label>
        <input type="text" id="instruct-text">

        <button id="generate-audio">生成音频</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // 生成音频按钮点击事件
        $('#generate-audio').click(function () {
            alert('生成音频功能尚未实现。');
        });

        // 上传音频区域拖放事件
        $('#upload-audio-area').on('dragover', function (e) {
            e.preventDefault();
            $(this).addClass('hover');
        }).on('dragleave', function () {
            $(this).removeClass('hover');
        }).on('drop', function (e) {
            e.preventDefault();
            $(this).removeClass('hover');
            var files = e.originalEvent.dataTransfer.files;
            // 处理上传文件
            alert('已上传文件: ' + files[0].name);
        });

        // 添加power设置文件按钮点击事件
        $('#add-power-file').click(function () {
            var newSetting = prompt('请输入新的power设置内容:');
            if (newSetting) {
                // 处理新增设置
                alert('新增设置: ' + newSetting);
            }
        });
    });
</script>
</body>
</html>